<template>
  <div class="page">
    <div class="tools-bar">
      <div class="block" style="margin-left: -50%">
        <el-date-picker
          v-model="value5"
          type="datetimerange"
          :picker-options="pickerOptions2"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right">
        </el-date-picker>
      </div>
      <div class="left-wrap">
        <el-input prefix-icon="el-icon-search"  placeholder="请输入appKey" size="small" v-model="searchKey"></el-input>
        <el-button size="small" type="primary" @click="handleSearch">查询</el-button>
      </div>
    </div>
    <div :span="24">
      <el-table
        :data="tableData6">
        <el-table-column
          prop="id"
          label="ID">
        </el-table-column>
        <el-table-column
          prop="appKey"
          label="appKey">
        </el-table-column>
        <el-table-column
          prop="createById"
          label="创建ID">
        </el-table-column>
        <el-table-column
          prop="appName"
          label="app名称">
        </el-table-column>
        <el-table-column
          prop="isDelete"
          label="状态">
        </el-table-column>
        <el-table-column
          prop="createDate"
          label="创建时间">
        </el-table-column>
        <el-table-column
          prop="updateDate"
          label="更新时间">
        </el-table-column>
      </el-table>
    </div>
    <!--<pagination ref="pageInfo" :total="pageInfo.totalElements" :page.sync="pageInfo.currentPage" @pagination="pagination"></pagination>-->
  </div>
</template>

<script>
  import {api} from '@/utils'
  // import { pagination } from '@/components'

  export default {
    methods: {
      // pagination(e) {
      //   // let params = {};
      //   console.log(e);
      //   // params.pageNum = e.page;
      //   // params.pageSize = e.limit;
      //   this.getData(params)
      // },
      handleSearch() {
        let params = {}
        params.appKey = this.searchKey;
        console.log('params',params.appKey);
        this.getData(params);
      },
      cleanSearch () {
        this.searchKey = ''
      },
      getData(param){
        this.$axios.request({
          url: api.getApplicationName,
          method: 'post',
          params: param
        }).then(data => {
          let result = data.data;
          if (data.success === true) {
            this.tableData6 = result
          } else {
            this.$message({
              message: '请求失败',
              duration: 2000,
              type: 'error'
            })
          }
        })
      }
    },
    data() {
      return {
        tableData6:[],
        searchKey: '',
        // pageInfo: {
        //   totalElements: 0,
        //   currentPage: 1
        // },
        pickerOptions2: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value4: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
        value5: ''
      }
    },
    // components: {
    //   pagination
    // },
    mounted () {
      this.getData()
    }
  }
</script>

<style scoped>

</style>
